<template>
    <div>
        <el-table v-adaptive :data="materialSupplierList" :border="true" highlight-current-row :stripe="true"
            @selection-change="handleSelectionChange" :header-cell-style="$headerCellStyle">
            <el-table-column :align="'center'" type="selection" width="55" />
            <el-table-column :show-overflow-tooltip="true" :align="'center'" label="供应商别名" prop="supplierAlias"
                width="200" />
            <el-table-column :show-overflow-tooltip="true" :align="'center'" label="厂商" prop="supplierName"
                width="200" />
            <el-table-column :show-overflow-tooltip="true" :align="'center'" label="厂商类别" prop="supplierClass"
                width="80">
                <template #default="scope">
                    <el-tag :type="scope.row.supplierClass === '0' ? 'success' : 'info'">
                        {{ scope.row.supplierClass === '0' ? '生产商' : '供应商' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" :align="'center'" label="输入码" prop="inputCode" />
            <el-table-column :show-overflow-tooltip="true" :align="'center'" label="注册商标" prop="trademark" />
            <el-table-column :show-overflow-tooltip="true" :align="'center'" label="是否国外" prop="foreignx" width="80">
                <template #default="scope">
                    <dict-data-tag :options="dictDataMap['sys_yes_no']" :value="scope.row.foreignx" />
                </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" :align="'center'" label="厂商代码" prop="supplierCode" />
            <el-table-column :show-overflow-tooltip="true" :align="'center'" label="是否使用" prop="usedFlag" width="80">
                <template #default="scope">
                    <dict-data-tag :options="dictDataMap['sys_yes_no']" :value="scope.row.usedFlag" />
                </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" :align="'center'" label="备注信息" prop="remarks" />
            <el-table-column :align="'center'" class-name="small-padding fixed-width" label="操作">
                <template #default="scope">
                    <el-button v-hasPerm="['material:materialSupplier:edit']" type="success"
                        @click="handleUpdate(scope.row)"><template #icon>
                            <i-ep-edit />
                        </template>修改
                    </el-button>
                    <el-button v-hasPerm="['material:materialSupplier:remove']" type="danger"
                        @click="handleDelete(scope.row)"><template #icon>
                            <i-ep-delete />
                        </template>删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNum"
            :total="total" @pagination="getList" />
    </div>
</template>

<script lang="ts" setup>
import {
    delMaterialSupplier,
    getMaterialSupplier,
    selectPageMaterialSupplier,
} from "@/api/material/materialSupplier";

import { useDictStoreHook } from "@/store/modules/dict";
const { proxy } = getCurrentInstance() as any
const dictStore = useDictStoreHook();
const dictDataMap = ref(dictStore.isTypeGetData('sys_yes_no'))
const emits = defineEmits(["handleSelectionChange", "handleUpdate"])
// tabs 标签页默认值
const tabsValue = ref('1')
// 选中数组
const ids = ref([])
// 非单个禁用
const single = ref(true)
// 显示搜索条件
const showSearch = ref(true)
// 总条数
const total = ref(0)
// 药品供应商生产商维护表格数据
const materialSupplierList = ref([])
// 弹出层标题
const title = ref("")
// 是否显示弹出层
const open = ref(false)

const props = defineProps({
    queryParams: {
        type: Object,
        default: () => ({})
    },
})
watch(() => props.queryParams.supplierClass, (_newValue, _oldValue) => {
    getList()
}, { deep: true, immediate: true })
/** 查询药品供应商生产商维护列表 */
function getList() {
    selectPageMaterialSupplier(props.queryParams).then((response: any) => {
        materialSupplierList.value = response.rows;
        total.value = response.total;
    });
}
/** 搜索按钮操作 */
function handleQuery() {
    props.queryParams.pageNum = 1;
    getList();
}
/** 重置按钮操作 */
function resetQuery() {
    handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
    emits('handleSelectionChange', selection)
}
/** 修改按钮操作 */
function handleUpdate(row) {
    const id = row.supplierId || ids.value
    getMaterialSupplier(id).then(response => {
        emits("handleUpdate", response.data)
    });
}
/** 删除按钮操作 */
function handleDelete(row) {
    const idsThis = row.supplierId || ids.value;
    ElMessageBox.confirm(`是否确认删除"${row.supplierName}"的数据项？`,
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        delMaterialSupplier(idsThis).then(() => {
            getList();
            ElMessage.success("删除成功");
        })
    }).catch(() => {
    })
}
/** 导出按钮操作 */
function handleExport() {
    // download('base/materialSupplier/export', {
    //     ...queryParams
    // }, `materialSupplier_${new Date().getTime()}.xlsx`)
}

defineExpose({
    getList
})
</script>

<script lang="ts">
export default {
    name: "tabTable"
}
</script>

<style scoped></style>
